<template>
<div>
    <div class="head">
        <el-row> 
            <!-- 产品的数量 -->
             <el-col :span="3">产品总数：{{this.product_info.length}}</el-col>
         </el-row>
    </div>
    <div class="body">
        <!-- 产品列表信息 大小为100%-->
      <el-table :data="product_info" :row-class-name="tableRowClassName" height="100%" style="width: 100%">
        <!-- 产品序号信息第一列 固定栏 宽度为150px 传值为id-->
        <el-table-column fixed prop="id" label="产品序号" :index="indexMethod" width="150" ></el-table-column>
        <!-- 产品名称信息第二列 宽度为150px -->
        <el-table-column prop="name" label="产品名称" width="200"></el-table-column>
        <el-table-column prop="serial" label="产品所属区域" width="200"> </el-table-column>
        <el-table-column prop="type" label="产品类型" width="200"  :filter-multiple="false"
            :formatter="formatName1"
            :filters="[{ text: '动物类', value: '1' }, { text: '植物类', value: '2' }]"  :filter-method="filterHandler1"></el-table-column>
        <el-table-column prop="status" label="产品状态" width="200" 
             :filter-multiple="false"
            :formatter="formatName"
            :filters="[{ text: '成熟', value: '0' }, { text: '未成熟', value: '1' }]"  :filter-method="filterHandler" ></el-table-column>
        <el-table-column fixed="right" label="操作" width="350">
           <template slot-scope="scope">
            <el-button size="mini" type="info" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" slot="reference" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
           </template>
        </el-table-column>
      </el-table>
    </div>
</div>
</template>
<script>
import axios from '@/plugins/axios'  //在哪里用就在哪里引入
require('@/mock/product_info.js')
export default {
    data() {
      return {
        product_info: [],
        search: '',
        dialogFormVisible: false,
        dialogFormVisible1: false,
        formLabelWidth: '120px',
        modform:true,
        oper:0,
            upLoadData:{
                "type":'4'
            },
            optionstype: [{
                    id: 1,
                    label: "动物类"
                },
                {
                    id: 2,
                    label: "植物类"
                },
            ],
             options: [{
                    id: 0,
                    label: "成熟"
                },
                {
                    id: 1,
                    label: "未成熟"
                }
            ],
      }
    },
    computed:{
    count(){
        var count=0;
        for(let i=0;i<this.product_info.length;i++){
          if(this.product_info[i].status==='0'){
           count++;
         }
        }
        return count;        
      },
    },
    created:function(){
        axios.get('/action/product_info')
        .then(response=>{
          // console.log('response', response)
            this.product_info=response.data;
            // console.log("1234")
        })
        .catch(error=>{
           console.log(error);
          //  alert('网络错误');
        })       
    },
    methods: {
        
      successHandle(){},
      //过滤筛选的方法
        filterHandler(value, row, column) {

        const property = column['property'];
        return row[property] === value;
      },
        //对列的处理
        formatName: function (row, column) {
            return row.status == '0' ? '成熟' : row.status == '1' ? '未成熟' : '';
        },
        //过滤筛选的方法
        filterHandler1(value, row, column) {

        const property = column['property'];
        return row[property] === value;
      },
        //对列的处理
        formatName1: function (row, column) {
            return row.type == '1' ? '动物类' : row.type == '2' ? '植物类' :'';
        },

      indexMethod(index) {
        for(let i=0;i<product_info.length;i++)
        {
          index=this.product_info[i].id;
        }
        return index;
      },
       handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      //离线浅红，在线浅蓝
      tableRowClassName({row, rowIndex}) {
        if (row.status === 0) {
          return 'warning-row';
        } else if (row.status === 1) {
          return 'success-row';
        }
        return '';
      },
      Search(index, row) {
        console.log(index, row);
      },
    }
    }
</script>
<style scoped>
 .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

.head{
    position: absolute;
    top: 15%;
    left: 14.5%;
    width: 82%;
    padding: 3px;
    margin: 0px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
}
.button{
    position:absolute;
    left: 90%;
}
.body{
    position:absolute;
    left: 14.5%;
    width: 82%;
    top:23%;
    padding: 3px;
    margin: 0px;
    height: 73%;
    border: 1px solid black;
    text-align: center;
}
.el-select{
  width: 250px;
}
.el-input{
  width: 250px;
}

</style>


